<template>
  <FormCreate
    v-model:api="formApi"
    :rule="formRules"
    :option="props.option"
    @mounted="handleMounted"
    @reload="handleReload"
    @change="handleChange"
  ></FormCreate>
</template>

<script setup lang="ts">
  /**
   * @description 用于原生字段form-create
   */
  import { ref, watch, watchEffect } from 'vue';

  import JiraKey from './comp/jiraKey.vue';
  import PassWord from './formcreate-password.vue';
  import SearchSelect from './searchSelect.vue';

  import formCreate, { Api, FormRule } from '@form-create/arco-design';

  formCreate.component('PassWord', PassWord);
  formCreate.component('SearchSelect', SearchSelect);
  formCreate.component('JiraKey', JiraKey);
  const FormCreate = formCreate.$form();

  const props = defineProps<{
    rule?: FormRule; // 表单的规则
    option: any; // 全局配置项
    api?: Api; // 收集表单的值
  }>();

  const emits = defineEmits(['update:api', 'update:rule', 'mounted', 'reload', 'change']);

  const formApi = ref<Api>();

  watchEffect(() => {
    formApi.value = props.api;
  });
  watch(
    () => formApi.value,
    (val) => {
      emits('update:api', val);
    }
  );

  const formRules = ref<FormRule | undefined>([]);
  watchEffect(() => {
    formRules.value = props.rule;
  });
  watch(
    () => props.rule,
    (val) => {
      formRules.value = val;
      formApi.value?.refresh();
    }
  );

  watch(
    () => formRules.value,
    (val) => {
      emits('update:rule', val);
    }
  );

  function handleMounted() {
    emits('mounted');
  }

  function handleReload() {
    emits('reload');
  }

  function handleChange(value: any) {
    formApi.value?.validateField(value);
    emits('change');
  }
</script>

<style scoped></style>
